<div ng-if="emoObj.emotionShow" ng-click="$event.stopPropagation()"
     class="fc-dropdown-menu fc-editor-emotions-panel">

    <ul class="nav nav-tabs nav-justified">
        <li ng-repeat="name in config.emotions track by name" ng-click="getConfig(name)"
            ng-class="{ active: emotionConfig.name === name }" class="text-center" >
            <a href><img ng-src="images/editor/{{ name }}.png"/></a>
        </li>
    </ul>
    <div>
        <table class="table fc-editor-table">
            <tr ng-repeat="row in range(emotionConfig.rowsPerPage)">
                <td ng-repeat="column in range(emotionConfig.columnsPerRow)" style="padding: 0">
                    <a href ng-if="getItemIndex(row, column) < emotionConfig.total"
                       data-ng-click="insertEmotion(row, column)">
                        <span class="fc-editor-sqEmo-emoticons"
                              ng-class="emotionConfig.className" ng-style="emotionConfig.style">
                            <img ng-src="{{ getEmotionImage(row, column) }}">
                            <span ng-if="emotionConfig.showName" class="text-center fc-emotion-name">{{ emotionConfig.emotions[getItemIndex(row, column)] }}</span>
                        </span>

                    </a>
                    <span ng-if="getItemIndex(row, column) >= emotionConfig.total">
                        <span class="fc-editor-sqEmo-emoticons"
                              ng-class="emotionConfig.className" ng-style="emotionConfig.style"></span>
                    </span>
                </td>
            </tr>
        </table>
        <div style="height: 4px;"></div>
        <ul class="pagination pull-right fc-editor-pagination">
            <li ng-repeat="i in range(pages)">
                <a href ng-click="setPageIndex(i+1, $event)" ng-class="{ backColorEEE: pageIndex === (i + 1) }">{{i + 1}}</a>
            </li>
        </ul>
    </div>
</div>